<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房贷本金平均摊还法</title>
    <link rel="stylesheet" href="../../layuimini/lib/layui-v2.6.3/css/layui.css" type="text/css">

    <style>
        .item {
            display: flex;
            margin-top: 35px;
        }
        button {
            margin-top: 30px;
        }
        #mydiv {
            margin-left: 20px;
        }
        #put1 {
            display: inline-block;
            /* margin-left: 10px; */
        }
        button {
            background-color: rgba(142, 156, 163, 0.2);
            /* border: none; */
        }
        #app {
            width: 50%;
            margin-left: 680px;
            padding-left: 20px;
            padding-bottom: 10px;
        }
    </style>
</head>
<body>
<h2 align="center">房贷本金平均摊还法</h2>
<div id="app">
    <div class="item">
        <div>总金额：(/万)</div>
        <input type="number" v-model="total" name="" id="put1" >
    </div>
    <div class="item">
        <div>利率：（%）</div>
        <input type="number" v-model="rate" name="" id="">
    </div>
    <div class="item">
        <div>期限：（/年）</div>
        <input type="number" v-model="year" name="" id="">
    </div>

    <div class="item">
        <div>每月应还本金：</div>
        <input type="number" v-model="result" name="" id="">
    </div>
    <div class="item">
        <div>还款总额：</div>
        <input type="text" v-model="total_er" name="" id="">
    </div>
    <div class="item">
        <div>利息总额：</div>
        <input type="text" v-model="total_lixi" name="" id="">
    </div>
    <div class="item">
        <div>每月递减金额：</div>
        <input type="text" v-model="dijian" name="" id="">
    </div>

    <button class="layui-btn layui-btn-radius layui-btn-normal" @click="compontedBJ">计算等额本金</button>

    <div v-if="isShow" class="item"  v-for="(item, index) in list" :key="index">
        <div > 第{{index + 1}}月 </div>
        <div >应还金额：{{item.res}}</div>
        <div id="mydiv"> 剩余未还金额：{{item.yu}} </div>
    </div>

</div>
<script src="vue.common.dev.js" type="text/javascript"></script>

<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                isShow:true,
                total: 10,
                rate: 4.9,
                year: 1,
                result: '',
                list: [],
                total_lixi: '',
                total_er: '',
                dijian: ''
            }
        },
        computed: {
            c_total() {
                return this.total * 10000
            },
            c_rate() {
                return this.rate / 100 / 12
            },
            c_months() {
                return this.year * 12
            }
        },
        methods: {


            // 等额本金的计算公式为： 每月还本付息金额=（本金/还款月数）+（本金－累计已还本金）×月利率
            //  每月应还本金=贷款本金÷还款月数

            // 每月应还利息=剩余本金×月利率=(贷款本金-已归还本金累计额)×月利率。

            // 每月月供递减额=每月应还本金×月利率=贷款本金÷还款月数×月利率

            // 总利息=（还款月数+1）×贷款总额×月利率÷2
            compontedBJ() {
                // 月供
                let res
                // 已还本金
                let yhbj = 0;
                // 已还的本息
                let yhbx = 0
                //每月本金
                let mybj=0
                // 贷款本金                还款月数                月利率
                let total = this.c_total, mouths = this.c_months, rate = this.c_rate
                this.isShow=true
                res = (total / mouths) + (total - yhbj) * rate
                res = res.toFixed(2)
                yhbx = res + yhbx
                mybj=(total/mouths)
                this.result = mybj
                this.total_lixi = (mouths + 1) * total * rate / 2
                this.total_er = this.total_lixi + this.c_total
                this.list.push({res: res, yu: (this.total_er - yhbx).toFixed(2)})
                this.dijian = (total / mouths * rate).toFixed(2)
                for(let i = 1; i < mouths; i++) {
                    yhbj = total / mouths * i
                    res = (total / mouths) + (total - yhbj) * rate
                    res = res.toFixed(2)
                    yhbx = Number(res) + Number(yhbx)
                    this.list.push({res: res, yu: (this.total_er - yhbx).toFixed(2)})
                }
            }
        }
    })


</script>



</body>
</html>